<template>
    <el-dialog :model-value="dialogVisible" :title="type == 'add' ? '新增' : '编辑'" width="600px"
        :before-close="handleClose" append-to-body>
        <el-form ref="formRef" :model="dataForm" label-width="100px" :rules="rules" :inline="false">
            <el-form-item label="类型名称" prop="categoryName">
                <el-input v-model="dataForm.categoryName" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="按星期" prop="days">
                <el-select v-model="dataForm.days" clearable style="width:100%" multiple>
                    <el-option v-for="item in WEEK_LIST" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="按日期">
                <el-date-picker style="width:100%" v-model="date" type="daterange" range-separator="至"
                    start-placeholder="开始" end-placeholder="结束" clearable value-format="YYYY-MM-DD" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="submit()">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { WEEK_LIST } from '../Common/config'
import api from '@/api'
const props = defineProps({
    dialogVisible: {
        type: Boolean,
        default: false
    },
    type: {
        default: 'add',
        type: String

    },
    dataForm: {
        type: Object,
        default: () => {
            return {
                days: [],
                categoryName: ''
            }
        }
    }

})


const date = ref([])

const rules = reactive({
    categoryName: [
        {
            required: true,
            message: '请输入',
            trigger: 'blur'
        }, {
            min: 2, max: 18, message: '请输入 2-18个字符',
            required: true,
            trigger: 'blur'
        }
    ],
    people: [
        {
            required: true,
            message: '请选择',
            trigger: 'blur'
        }
    ]
})





const formRef = ref(null)

const emit = defineEmits(['on-update', 'handleClose'])


onMounted(() => {
    console.log(props)
    const { type, dataForm } = props
    if (type == 'edit' && dataForm.content) {
        try {
            const { days, endDate, startDate } = JSON.parse(dataForm.content)
            console.log(days)
            props.dataForm['days'] = days
            if (startDate && startDate != '') date.value = [startDate, endDate]


        } catch (error) {

        }
    }
});



// 关闭
const handleClose = () => {
    formRef.value.resetFields()
    formRef.value.clearValidate()
    emit('handleClose')

}

const submit = () => {
    if (!formRef) return
    formRef.value.validate(valid => {
        if (valid) {

            const obj = {
                'add': 'dateTypeAdd',
                'edit': 'dateTypeEdit'
            }
            const { content, days, categoryName } = props.dataForm
            let data = {
                categoryName,
                content
            }
            let con = {
                startDate: '',
                endDate: '',
                days
            }
            if (date.value && date.value.length > 0) {
                con['startDate'] = date.value[0]
                con['endDate'] = date.value[1]
            }
            data['content'] = JSON.stringify(con)
            if (props.type == 'edit') data['id'] = props.dataForm.id
            api.feeConfig[obj[props.type]](data).then(res => {
                emit('on-update')
                handleClose()
                ElMessage.success('操作成功')
            })
        } else {
            console.log('error submit!')
            return false
        }
    })
}


</script>
